<template>
	<view class="login-container">
		<!-- 背景装饰 -->
		<view class="background-decoration">
			<view class="decoration-circle circle-1"></view>
			<view class="decoration-circle circle-2"></view>
			<view class="decoration-circle circle-3"></view>
		</view>

		<!-- 顶部装饰图片 -->
		<view class="header-section">
			<image class="rocket rocket-animation" src="../../static/img/login_top3.png" mode="widthFix"></image>
			<view class="welcome-text">
				<text class="welcome-title">伊言一语</text>
				<text class="welcome-subtitle">您的专业心理健康伙伴</text>
			</view>
		</view>

		<!-- 登录注册切换卡片 -->
		<view class="auth-card">
			<view class="tab-switcher">
				<view class="tab-item" :class="{ active: !cur }" @click="tiggerSelect(0)">
					<text class="tab-text">登录</text>
				</view>
				<view class="tab-item" :class="{ active: cur }" @click="tiggerSelect(1)">
					<text class="tab-text">注册</text>
				</view>
				<view class="tab-indicator" :class="{ 'move-right': cur }"></view>
			</view>

			<!-- 登录表单 -->
			<view class="form-section" v-if="!cur">
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="iconfont icon-yonghu"></text>
						</view>
						<input 
							class="form-input" 
							v-model="form.email" 
							type="text" 
							placeholder="请输入邮箱" 
							placeholder-class="input-placeholder" 
						/>
					</view>
				</view>
				
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="iconfont icon-xiugai"></text>
						</view>
						<input 
							class="form-input" 
							v-model="form.password" 
							type="password" 
							placeholder="请输入登录密码" 
							placeholder-class="input-placeholder" 
						/>
					</view>
				</view>
			</view>

			<!-- 注册表单 -->
			<view class="form-section" v-if="cur">
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="iconfont icon-yonghu"></text>
						</view>
						<input 
							class="form-input" 
							v-model="registerForm.email" 
							type="text" 
							placeholder="请输入邮箱" 
							placeholder-class="input-placeholder" 
						/>
					</view>
				</view>
				
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="iconfont icon-xiaoxi"></text>
						</view>
						<input 
							class="form-input" 
							v-model="registerForm.name" 
							type="text" 
							placeholder="请输入用户昵称" 
							placeholder-class="input-placeholder" 
						/>
					</view>
				</view>
				
				<!-- 协议确认 -->
				<view class="agreement-section">
					<view class="agreement-checkbox" @click="toggleAgreement">
						<view class="checkbox" :class="{ checked: agreedToTerms }">
							<text v-if="agreedToTerms" class="iconfont icon-like"></text>
						</view>
						<view class="agreement-text">
							<text class="agreement-prefix">我已阅读并同意</text>
							<text class="agreement-link" @click.stop="viewUserAgreement">《用户服务协议》</text>
							<text class="agreement-and">和</text>
							<text class="agreement-link" @click.stop="viewPrivacyPolicy">《隐私政策》</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="button-section">
				<view class="primary-button" @click="toLogin">
					<view class="button-content">
						<text class="button-text">{{ cur ? '立即注册' : '立即登录' }}</text>
						<view class="button-icon">
							<text class="iconfont icon-left" style="transform: rotate(180deg);"></text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 注册验证弹窗 -->
		<view v-show="showModal" class="modal-overlay">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">{{ step === 1 ? '邮箱验证' : '完善信息' }}</text>
					<view class="close-button" @click="showModal=false">
						<text class="iconfont icon-delete"></text>
					</view>
				</view>
				
				<!-- 验证码步骤 -->
				<view v-if="step == 1" class="modal-body">
					<view class="input-group">
						<view class="input-wrapper">
							<view class="input-icon">
								<text class="iconfont icon-xiaoxi"></text>
							</view>
							<input 
								class="form-input" 
								v-model="verificationCode" 
								type="text" 
								:maxlength="6"
								placeholder="请输入6位验证码" 
								placeholder-class="input-placeholder" 
							/>
						</view>
					</view>
					
					<view class="verification-actions">
						<view 
							v-if="!sendVerificationCodeState" 
							class="verify-button primary" 
							@click="toSendVerificationCode"
						>
							发送验证码
						</view>
						<view v-else class="verify-button disabled">
							已发送 ({{ countdown }}s)
						</view>
						
						<view 
							:class="(verificationCode.length == 6 && hasSendVerificationCode) ? 'verify-button primary' : 'verify-button disabled'"
							@click="toCheckVerificationCode"
						>
							下一步
						</view>
					</view>
				</view>
				
				<!-- 完善信息步骤 -->
				<view v-if="step == 2" class="modal-body">
					<view class="input-group">
						<view class="input-wrapper">
							<view class="input-icon">
								<text class="iconfont icon-yonghu"></text>
							</view>
							<input 
								class="form-input" 
								v-model="registerForm.name" 
								type="text" 
								placeholder="请输入用户名" 
								placeholder-class="input-placeholder" 
							/>
						</view>
					</view>
					
					<view class="input-group">
						<view class="input-wrapper">
							<view class="input-icon">
								<text class="iconfont icon-xiugai"></text>
							</view>
							<input 
								class="form-input" 
								v-model="registerForm.password" 
								type="password" 
								placeholder="请输入密码" 
								placeholder-class="input-placeholder" 
							/>
						</view>
					</view>
					
					<view class="input-group">
						<view class="input-wrapper">
							<view class="input-icon">
								<text class="iconfont icon-xiugai"></text>
							</view>
							<input 
								class="form-input" 
								v-model="registerForm.surePassword" 
								type="password" 
								placeholder="请确认密码" 
								placeholder-class="input-placeholder" 
							/>
						</view>
					</view>
					
					<view class="modal-actions">
						<view class="modal-button primary" @click="toRegister">
							完成注册
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from "js-md5";
	export default {
	data() {
		return {
			cur: 0,
			showModal: false,
			form: {
				email: '',
				password: '',
			},
			registerForm: {
				name: "",
				email: "",
				password: "",
				surePassword: "",
				avatar: ""
			},
			step: 1,
			timestamp: +new Date(),
			verificationCode: "",
			sendVerificationCodeState: false, // 验证码倒计时状态
			hasSendVerificationCode: false, //是否发送验证码
			countdown: 60,
			timer: null,
			loading: false,
			agreedToTerms: false // 是否同意协议
		}
	},
		onLoad() {
			let needreload = uni.getStorageSync("needreload");
			if(needreload == 1){
				location.reload();
				uni.setStorageSync("needreload", 0)
			}
			// 
		},
		methods: {
			tiggerSelect(state) {
				this.cur = state;
				this.initChangeStage(state)
			},
			toRegister() {
				if (!this.registerForm.name) {
					this.$Common.tipMsg("用户名不能为空");
					return;
				}
				if (!this.registerForm.password) {
					this.$Common.tipMsg("密码不能为空");
					return;
				}
				if (this.registerForm.password !== this.registerForm.surePassword) {
					this.$Common.tipMsg("两次密码不一致");
					return;
				}
				this.$Request.post(this.$Config.APIURL + "/api/auth/register", this.registerForm).then(res => {
					if (res?.success || res?.code == 200) {
						this.$Common.tipMsg(res?.message);
						this.showModal = false;
						this.initChangeStage(0);
					} else {
						this.$Common.tipMsg(res?.message);
					}
				});
			},
			toCheckVerificationCode() {
				if (!(this.verificationCode.length == 6 && this.hasSendVerificationCode)) {
					return;
				}
				let query = {
					verificationCode: this.verificationCode,
					timestamp: this.timestamp,
				};
				this.$Request.post(this.$Config.APIURL + "/api/auth/verify-code", {
					email: this.registerForm.email,
					code: this.verificationCode
				}).then(res => {
					if (res?.success || res?.code == 200) {
						if (this.timer != null) {
							clearInterval(this.timer);
							this.timer = null;
						}
						this.step = 2;
						this.countdown = 60;
						this.sendVerificationCodeState = false;
					} else {
						this.$Common.tipMsg(res?.message);
					}
				})
			},
			toSendVerificationCode() {
				let query = {
					email: this.registerForm.email,
					timestamp: this.timestamp,
				};
				this.$Request.post(this.$Config.APIURL + "/api/auth/send-code", {
					email: this.registerForm.email
				}).then(res => {
					if (res?.success || res?.code == 200) {
						this.$Common.tipMsg(res?.message);
						this.sendVerificationCodeState = true;
						this.hasSendVerificationCode = true;
						this.timer = setInterval(() => {
							if (this.countdown < 1) {
								if (this.timer != null) {
									clearInterval(this.timer);
									this.timer = null;
								}
								this.countdown = 60;
								this.sendVerificationCodeState = false;
							} else {
								this.countdown--;
							}
						}, 1000);
					} else {
						this.$Common.tipMsg(res?.message);
					}
				})
			},
		initChangeStage(state) {
			this.cur = state;
			this.step = 1;
			this.verificationCode = "";
			this.sendVerificationCodeState = false;
			this.hasSendVerificationCode = false;
			this.registerForm.email = "";
			this.registerForm.name = "";
			this.registerForm.password = "";
			this.registerForm.surePassword = "";
			this.form.email = "";
			this.form.password = "";
			this.countdown = 60;
			this.timer = null;
			this.agreedToTerms = false; // 重置协议同意状态
		},
			// 登陆
			async toLogin() {
				if (this.cur == 0) {
					if (!this.form.email) {
						this.$Common.tipMsg("请输入用户邮箱")
						return;
					}
					if (!this.form.password) {
						this.$Common.tipMsg("请输入用户密码")
						return;
					}
					
					try {
						// 使用Store中的login方法
						const user = await this.$store.dispatch('login', {
							email: this.form.email,
							password: this.form.password
						});
						
						if (user) {
							this.$Common.tipMsg("登录成功");
							this.initChangeStage(0);
							
							// 延迟跳转确保状态更新完成
							setTimeout(() => {
								// 对于tabBar页面，必须使用switchTab
								uni.switchTab({
									url: '/pages/consultation/consultation',
									success: () => {
										console.log('跳转到咨询页面成功');
									},
									fail: (err) => {
										console.error('跳转失败:', err);
										// 降级处理：尝试使用reLaunch
										uni.reLaunch({
											url: '/pages/consultation/consultation'
										});
									}
								});
							}, 500);
						}
						
					} catch (error) {
						console.error('登录错误:', error);
						this.$Common.tipMsg(error.message || "登录失败");
					}
				} else {
					this.registerOperate()
				}
			},
		async registerOperate() {
			try {
				// 简单的邮箱格式验证
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!emailRegex.test(this.registerForm.email)) {
					this.$Common.tipMsg("请输入正确的邮箱格式");
					return;
				}
				if (!this.registerForm.name) {
					this.$Common.tipMsg("请输入昵称");
					return;
				}
				if (this.registerForm.name.length < 2) {
					this.$Common.tipMsg("昵称不得小于两位");
					return;
				}
				// 检查是否同意协议
				if (!this.agreedToTerms) {
					this.$Common.tipMsg("请先阅读并同意用户服务协议和隐私政策");
					return;
				}
				let md5_text = md5(this.registerForm.email);
				this.registerForm.avatar = `https://cravatar.cn/avatar/${md5_text}?d=robohash`;
				this.showModal = true;
			} catch (err) {
				this.$Common.tipMsg(err);
			}
		},
		
		// 切换协议同意状态
		toggleAgreement() {
			this.agreedToTerms = !this.agreedToTerms;
		},
		
		// 查看用户服务协议
		viewUserAgreement() {
			uni.navigateTo({
				url: '/pages/agreement/user-agreement'
			});
		},
		
		// 查看隐私政策
		viewPrivacyPolicy() {
			uni.navigateTo({
				url: '/pages/agreement/privacy-policy'
			});
		}
		}
	}
</script>

<style lang="scss" scoped>
// 主容器
.login-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 40rpx 30rpx;
}

// 背景装饰
.background-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	
	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		
		&.circle-1 {
			width: 200rpx;
			height: 200rpx;
			top: 10%;
			right: -50rpx;
			animation: float 6s ease-in-out infinite;
		}
		
		&.circle-2 {
			width: 150rpx;
			height: 150rpx;
			bottom: 20%;
			left: -30rpx;
			animation: float 8s ease-in-out infinite reverse;
		}
		
		&.circle-3 {
			width: 100rpx;
			height: 100rpx;
			top: 30%;
			left: 20%;
			animation: float 10s ease-in-out infinite;
		}
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-20px) rotate(180deg);
	}
}

// 顶部区域
.header-section {
	position: relative;
	z-index: 2;
	text-align: center;
	margin-bottom: 60rpx;
	
	.rocket {
		width: 300rpx;
		height: auto;
		margin-bottom: 40rpx;
		
		&.rocket-animation {
			animation: rocket-float 3s ease-in-out infinite;
		}
	}
	
	.welcome-text {
		.welcome-title {
			display: block;
			font-size: 48rpx;
			font-weight: 700;
			color: white;
			margin-bottom: 16rpx;
			text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
		}
		
		.welcome-subtitle {
			display: block;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
			font-weight: 300;
		}
	}
}

@keyframes rocket-float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-15px);
	}
}

// 认证卡片
.auth-card {
	background: white;
	border-radius: 30rpx;
	padding: 50rpx 40rpx;
	margin: 0 20rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 2;
	flex: 1;
	
	// Tab切换器
	.tab-switcher {
		position: relative;
		display: flex;
		background: #f8f9fa;
		border-radius: 20rpx;
		padding: 8rpx;
		margin-bottom: 50rpx;
		
		.tab-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			border-radius: 16rpx;
			position: relative;
			z-index: 2;
			transition: all 0.3s ease;
			
			.tab-text {
				font-size: 32rpx;
				font-weight: 500;
				color: #666;
				transition: color 0.3s ease;
			}
			
			&.active .tab-text {
				color: white;
			}
		}
		
		.tab-indicator {
			position: absolute;
			top: 8rpx;
			left: 8rpx;
			width: calc(50% - 8rpx);
			height: calc(100% - 16rpx);
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 16rpx;
			transition: transform 0.3s ease;
			z-index: 1;
			
			&.move-right {
				transform: translateX(100%);
			}
		}
	}
	
	// 表单区域
	.form-section {
		margin-bottom: 40rpx;
		
		.input-group {
			margin-bottom: 30rpx;
			
			.input-wrapper {
				display: flex;
				align-items: center;
				background: #f8f9fa;
				border-radius: 20rpx;
				padding: 0 30rpx;
				border: 2rpx solid transparent;
				transition: all 0.3s ease;
				
				&:focus-within {
					border-color: #667eea;
					background: rgba(102, 126, 234, 0.05);
				}
				
				.input-icon {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					
					.iconfont {
						font-size: 32rpx;
						color: #667eea;
					}
				}
				
				.form-input {
					flex: 1;
					height: 100rpx;
					font-size: 30rpx;
					color: #333;
					background: transparent;
					border: none;
					
					&::placeholder {
						color: #999;
					}
				}
			}
		}
	}
	
	// 按钮区域
	.button-section {
		.primary-button {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.3);
			transition: all 0.3s ease;
			
			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 5rpx 15rpx rgba(102, 126, 234, 0.3);
			}
			
			.button-content {
				display: flex;
				align-items: center;
				justify-content: center;
				
				.button-text {
					font-size: 32rpx;
					font-weight: 600;
					color: white;
					margin-right: 15rpx;
				}
				
				.button-icon {
					.iconfont {
						font-size: 28rpx;
						color: white;
					}
				}
			}
		}
		
		.secondary-button {
			background: transparent;
			border: 2rpx solid #667eea;
			border-radius: 20rpx;
			padding: 25rpx;
			text-align: center;
			transition: all 0.3s ease;
			
			&:active {
				background: rgba(102, 126, 234, 0.1);
			}
			
			.button-text {
				font-size: 28rpx;
				color: #667eea;
				font-weight: 500;
			}
		}
	}
	
	// 协议确认区域
	.agreement-section {
		margin-top: 30rpx;
		
		.agreement-checkbox {
			display: flex;
			align-items: flex-start;
			padding: 20rpx 0;
			
			.checkbox {
				width: 36rpx;
				height: 36rpx;
				border: 2rpx solid #ddd;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				margin-top: 4rpx;
				flex-shrink: 0;
				transition: all 0.3s ease;
				
				&.checked {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					border-color: #667eea;
					
					.iconfont {
						font-size: 20rpx;
						color: white;
					}
				}
			}
			
			.agreement-text {
				flex: 1;
				line-height: 1.6;
				
				.agreement-prefix {
					font-size: 28rpx;
					color: #666;
				}
				
				.agreement-link {
					font-size: 28rpx;
					color: #667eea;
					text-decoration: underline;
					margin: 0 4rpx;
					
					&:active {
						opacity: 0.7;
					}
				}
				
				.agreement-and {
					font-size: 28rpx;
					color: #666;
					margin: 0 4rpx;
				}
			}
		}
	}
}

// 模态框
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
	
	.modal-content {
		background: white;
		border-radius: 30rpx;
		width: 100%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow-y: auto;
		
		.modal-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 40rpx 20rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			.modal-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}
			
			.close-button {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				
				&:active {
					background: #e0e0e0;
				}
				
				.iconfont {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
		
		.modal-body {
			padding: 40rpx;
			
			.input-group {
				margin-bottom: 30rpx;
				
				.input-wrapper {
					display: flex;
					align-items: center;
					background: #f8f9fa;
					border-radius: 20rpx;
					padding: 0 30rpx;
					border: 2rpx solid transparent;
					transition: all 0.3s ease;
					
					&:focus-within {
						border-color: #667eea;
						background: rgba(102, 126, 234, 0.05);
					}
					
					.input-icon {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						
						.iconfont {
							font-size: 32rpx;
							color: #667eea;
						}
					}
					
					.form-input {
						flex: 1;
						height: 100rpx;
						font-size: 30rpx;
						color: #333;
						background: transparent;
						border: none;
						
						&::placeholder {
							color: #999;
						}
					}
				}
			}
			
			.verification-actions {
				display: flex;
				gap: 20rpx;
				margin-top: 40rpx;
				
				.verify-button {
					flex: 1;
					padding: 25rpx;
					border-radius: 15rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: 500;
					transition: all 0.3s ease;
					
					&.primary {
						background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
						color: white;
						
						&:active {
							transform: translateY(2rpx);
						}
					}
					
					&.disabled {
						background: #f0f0f0;
						color: #999;
					}
				}
			}
			
			.modal-actions {
				margin-top: 40rpx;
				
				.modal-button {
					width: 100%;
					padding: 30rpx;
					border-radius: 20rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 600;
					transition: all 0.3s ease;
					
					&.primary {
						background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
						color: white;
						
						&:active {
							transform: translateY(2rpx);
						}
					}
				}
			}
		}
	}
}

// 输入框占位符样式
.input-placeholder {
	color: #999;
}

	// 下边距
	.margin-b5 {
		margin-bottom: 5rpx;
	}

	.margin-b10 {
		margin-bottom: 10rpx;
	}

	.margin-b15 {
		margin-bottom: 15rpx;
	}

	.margin-b20 {
		margin-bottom: 20rpx;
	}

	.margin-b25 {
		margin-bottom: 25rpx;
	}

	.margin-b30 {
		margin-bottom: 30rpx;
	}

	.margin-b40 {
		margin-bottom: 40rpx;
	}

	.margin-b60 {
		margin-bottom: 60rpx;
	}

	.margin-b80 {
		margin-bottom: 80rpx;
	}

	.margin-b100 {
		margin-bottom: 100rpx;
	}

	// 右边距
	.margin-r5 {
		margin-right: 5rpx;
	}

	.margin-r10 {
		margin-right: 10rpx;
	}

	.margin-r15 {
		margin-right: 15rpx;
	}

	.margin-r20 {
		margin-right: 20rpx;
	}

	.margin-r25 {
		margin-right: 25rpx;
	}

	.margin-r30 {
		margin-right: 30rpx;
	}

	.margin-r40 {
		margin-right: 40rpx;
	}

	.margin-r60 {
		margin-right: 60rpx;
	}

	// 字体大小
	.font-18 {
		font-style: normal;
		font-size: 18rpx;
		font-family: Droid Sans Fallback;
	}

	.font-20 {
		font-style: normal;
		font-size: 20rpx;
		font-family: Droid Sans Fallback;
	}

	.font-22 {
		font-style: normal;
		font-size: 22rpx;
		font-family: Droid Sans Fallback;
	}

	.font-24 {
		font-style: normal;
		font-size: 24rpx;
		font-family: Droid Sans Fallback;
	}

	.font-26 {
		font-style: normal;
		font-size: 26rpx;
		font-family: Droid Sans Fallback;
	}

	.font-28 {
		font-style: normal;
		font-size: 28rpx;
		font-family: Droid Sans Fallback;
	}

	.font-30 {
		font-style: normal;
		font-size: 30rpx;
		font-family: Droid Sans Fallback;
	}

	.font-32 {
		font-style: normal;
		font-size: 32rpx;
		font-family: Droid Sans Fallback;
	}

	.font-34 {
		font-style: normal;
		font-size: 34rpx;
		font-family: Droid Sans Fallback;
	}

	.font-36 {
		font-style: normal;
		font-size: 36rpx;
		font-family: Droid Sans Fallback;
	}

	.font-38 {
		font-style: normal;
		font-size: 38rpx;
		font-family: Droid Sans Fallback;
	}

	.font-40 {
		font-style: normal;
		font-size: 40rpx;
		font-family: Droid Sans Fallback;
	}

	.font-46 {
		font-style: normal;
		font-size: 46rpx;
		font-family: Droid Sans Fallback;
	}

	.font-50 {
		font-style: normal;
		font-size: 50rpx;
		font-family: Droid Sans Fallback;
	}

	.font-60 {
		font-style: normal;
		font-size: 60rpx;
		font-family: Droid Sans Fallback;
	}

	.font-80 {
		font-style: normal;
		font-size: 80rpx;
		font-family: Droid Sans Fallback;
	}

	// 字体对齐
	.text-left {
		text-align: left;
	}

	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}

	// color相关
	.color-white {
		color: #FFFFFF;
	}

	.color-red {
		color: #dc0000;
	}

	// 黑色色阶向下
	.color-black {
		color: #000;
	}

	.color-black-3 {
		color: #333;
	}

	.color-black-6 {
		color: #666;
	}

	.color-black-9 {
		color: #999;
	}

	// 字体宽度
	.font-weight-400 {
		font-weight: 400;
	}

	.font-weight-500 {
		font-weight: bold;
	}

	// 间隔
	.spacing-20 {
		width: 750rpx;
		height: 20rpx;
		background-color: #f8f8f8;
	}

	// 圆角
	.radius-10 {
		border-radius: 10rpx;
	}

	.radius-20 {
		border-radius: 20rpx;
	}

	.radius-30 {
		border-radius: 30rpx;
	}

	.radius-circle {
		border-radius: 50%;
	}

	.radius-height {
		border-radius: 10000px;
	}

	// flex相关
	.vs-flex-item {
		flex: 1;
	}

	.vs-space-between {
		justify-content: space-between;
	}

	.vs-space-around {
		justify-content: space-around;
	}

	.vs-space-center {
		justify-content: center;
	}

	.vs-space-end {
		justify-content: flex-end;
	}

	.vs-row {
		flex-direction: row;
	}

	.vs-column {
		flex-direction: column;
	}

	.vs-align-end {
		align-items: flex-end;
	}

	.vs-align-center {
		display: flex;
		align-items: center;
	}

	.vs-align-start {
		align-items: flex-start;
	}

	.vs-item-hover {
		background-color: rgba(0, 0, 0, 0.05);
	}

	.vs-btn-hover {
		opacity: 0.8;
	}

	.color-base {
		color: #292D32;
	}

	.input-placeholder {
		color: #292D32;
	}

	.bg-color-base {
		background-color: #292D32;
	}
</style>
